import { View, CommonEvent } from "@tarojs/components";
import { useState } from "react";
import { AtTextarea } from 'taro-ui'
import AtInput from "./AtInput"
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/textarea.scss";


import "./index.scss"
import {CommonEventFunction} from "@tarojs/components/types/common";

interface LgInputProps {
  type: 'A' | 'B',
  value: string,
  inputName: string,
  inputType?: 'text' | 'number' | 'password' | 'phone' | 'idcard' | 'digit',
  placeholder?: string,
  maxLength?: number,
  onChange?: (value: string | number, event?: CommonEvent) => void,
  error?: boolean, //标记是否错误
  isNeed?: boolean
  className?: string
  autoFocus?: boolean
  focus?: boolean
  onFocus?: CommonEventFunction
  onBlur?: CommonEventFunction
}

export default function LgInput(props: LgInputProps) {
  switch (props.type) {
    case 'A':
      return (
        <LgInputA {...props} />
      )
    case 'B':
      return (
        <LgInputB {...props} />
      )

    default:
      return (
        <LgInputA {...props} />
      )

  }
}

function LgInputA(props: LgInputProps) {
  const [placeholder, setPlaceholder] = useState(props.placeholder ? props.placeholder : "")

  const onFocus = (_val, event) => {
    setPlaceholder("")
    props.onFocus && props.onFocus(event)
  }

  const onBlur = (_val, event) => {
    setPlaceholder(props.placeholder ? props.placeholder : "")
    props.onBlur && props.onBlur(event)
  }

  return (
    <View className={`lg-input-wrapper ${props.isNeed ? "lg-input-isNeed" : ""} ${props.className || ""}`}>
      <AtInput
        onFocus={onFocus}
        onBlur={onBlur}
        // error={error}
        // name={props.inputName}
        title={props.inputName}
        type={props.inputType ? props.inputType : 'text'}
        placeholder={placeholder}
        value={props.value}
        onChange={(v, e) => { if (props.onChange) { props.onChange(v, e) } }}
        className={`lg-input-a ${props.error? "error-status": ""}`}
        maxlength={props.maxLength}
        focus={props.focus}
        autoFocus={props.autoFocus}
      />
    </View>
  )
}

function LgInputB(props: LgInputProps) {
  const [placeholder, setPlaceholder] = useState(props.placeholder ? props.placeholder : "")

  const onFocus = (event) => {
    setPlaceholder("")
    props.onFocus && props.onFocus(event)
  }

  const onBlur = (event) => {
    setPlaceholder(props.placeholder ? props.placeholder : "")
    props.onBlur && props.onBlur(event)
  }

  return (
    <View className={`lg-input-b ${props.error? "error-status": ""} ${props.isNeed ? "lg-input-isNeed" : ""} ${props.className || ""}`}>
      <View className="inputName">{props.inputName}</View>
      <View className="textarea">
        <AtTextarea focus={props.focus} autoFocus={props.autoFocus} onFocus={onFocus} onBlur={onBlur} count={!!props.value} placeholderClass="lg-input-b-placeholderClass" onChange={(v, e) => { if (props.onChange) { props.onChange(v, e) } }} value={props.value} maxLength={props.maxLength} placeholder={placeholder} />
      </View>
    </View>
  )
}
